﻿@page "/components/drawer"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="Drawer">
        <Description>
            If you use two-way binding <CodeInline>@("@bind-Open=\"...\"")</CodeInline> you can toggle the drawer and it will close itself on navigation. If you set its <CodeInline>Open</CodeInline> parameter without two-way binding
            you effectively force it to stay open or closed depending on the provided value.
            <MudAlert Severity="Severity.Warning" Dense="true" Class="mt-3">Common pitfall: use <CodeInline>@("@bind-Open")</CodeInline> instead of <CodeInline>@("Open")</CodeInline> for auto-closing to work.</MudAlert>
        </Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Temporary drawer</Title>
                <Description>
                    Temporary drawers can be opened temporary above all other content until a section is selected or clicked on an overlay.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DrawerTemporaryExample />
            </SectionContent>
            <SectionSource Code="DrawerTemporaryExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Hide overlay</Title>
                <Description>
                    With parameter <CodeInline>DisableOverlay</CodeInline> overlay can be turned off for responsive and temporary drawers.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <DrawerOverlayExample />
            </SectionContent>
            <SectionSource Code="DrawerOverlayExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Persistent drawer</Title>
                <Description>
                    Persistent drawer is outside of its container, when opens it forces other contents to change their size.
                    Persistent drawer will be opened until the <CodeInline>Open</CodeInline> parameter is not changed.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <DrawerPersistentExample />
            </SectionContent>
            <SectionSource Code="DrawerPersistentExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Anchor drawer</Title>
                <Description>
                    With the <CodeInline>Anchor</CodeInline> property you can set the drawer to left or right. The default mode is left.
                    This example uses persistent drawers.
                </Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <DrawerAnchorExample />
            </SectionContent>
            <SectionSource Code="DrawerAnchorExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Responsive drawer</Title>
                <Description>
                    Responsive drawers are behaves persistent on wider screens and temporary on smaller ones.
                    Opened drawer closes automatically when window size becomes small, and opens after orginal state has been restored.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <iframe src="/iframe/docs/examples/drawer/persistent" class="docs-iframe">
                    <DrawerResponsiveExample />
                </iframe>
            </SectionContent>
            <SectionSource Code="DrawerResponsiveExample" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Clipping</Title>
                <Description>
                    A drawer with <CodeInline>ClipMode="Docked"</CodeInline> or <CodeInline>ClipMode="Always"</CodeInline> will not push the AppBar to the side when opening.
                    This parameter is evaluated only when drawers are used inside a <CodeInline>MudLayout</CodeInline> directly.
                    This example shows how a different options work with a responsive drawer. Change the size of the window to test all possiblities.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <iframe src="/iframe/docs/examples/drawer/clipped" class="docs-iframe">
                    <DrawerClippingExample />
                </iframe>
            </SectionContent>
            <SectionSource Code="DrawerClippingExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Custom Breakpoint</Title>
                <Description>
                    The switching point for responsive drawers can be changed using <CodeInline>Breakpoint</CodeInline> parameter. The default is <CodeInline>Breakpoint.Md</CodeInline>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <iframe src="/iframe/docs/examples/drawer/breakpoint" class="docs-iframe">
                    <DrawerBreakpointExample />
                </iframe>
            </SectionContent>
            <SectionSource Code="DrawerBreakpointExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Sizing drawers</Title>
                <Description>
                    It is possible to apply custom width/height values for drawers. The following examples demonstrate how to do it for different types of drawers.
                </Description>
            </SectionHeader>

            <SectionHeader>
                <SubTitle>1. Change drawers inside <CodeInline>MudLayout</CodeInline></SubTitle>
                <Description>
                    Changing the default width (240px) of a left and/or right drawer is possible through setting 
                    <CodeInline>DrawerWidthLeft</CodeInline> and/or <CodeInline>DrawerWidthRight</CodeInline> layout properties.
                    For more information see <MudLink Href="/customization/default-theme">customization page</MudLink>.
                </Description>
            </SectionHeader>

            <SectionHeader>
                <SubTitle>2. Change size for temporary drawers</SubTitle>
                <Description>Changing the default size is possible by setting the <CodeInline>Width</CodeInline> or <CodeInline>Height</CodeInline> parameters.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <DrawerSizeTemporaryExample />
            </SectionContent>
            <SectionSource Code="DrawerSizeTemporaryExample" ShowCode="false" GitHubFolderName="Drawer" />

            <SectionHeader>
                <SubTitle>3. Change size for persistent drawers inside <CodeInline>MudDrawerContainer</CodeInline></SubTitle>
                <Description>Changing the default size is possible by setting the <CodeInline>Width</CodeInline> parameter.</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <DrawerSizeContainerExample />
            </SectionContent>
            <SectionSource Code="DrawerSizeContainerExample" ShowCode="false" GitHubFolderName="Drawer" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
